<template>
  <div class="recommend">
    <left-menus active="3"></left-menus>
    <div class="recommend-main">
      <Breadcrumb :title="title"></Breadcrumb>
      <div class="recommend-main_content">
        <div>
          <div class="contenttitle">推荐列表</div>
          <div class="recommend-main_contentFirst">
            <el-table :data="tableData" style="width: 100%" border v-loading="loading">
              <el-table-column prop="pic" label="商品图片" width="100">
                <template slot-scope="scope">
                  <el-popover placement="right" title trigger="hover" prop="authSfzzm">
                    <img :src="scope.row.pic" style="width: 300px;" lazy />
                    <img
                      slot="reference"
                      :src="scope.row.pic"
                      alt
                      style="height:70px;width:70px"
                      lazy
                    />
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="goodsName" label="商品名称" show-overflow-tooltip></el-table-column>
              <el-table-column prop="price" label="总价"></el-table-column>
              <el-table-column prop="cny" label="人民币"></el-table-column>
              <el-table-column prop="cnyRate" label="人民币比例" width="110"></el-table-column>
              <el-table-column prop="points" label="积分"></el-table-column>
              <el-table-column prop="pointsRate" label="积分比例"></el-table-column>
              <el-table-column prop="isVipGoods" label="会员专属商品" width="110">
                <span slot-scope="scope">{{scope.row.isVipGoods == 1?"是":"否"}}</span>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="reDelete(scope.row.goodsId)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LeftMenus from "@/views/components/leftMenus";
import Breadcrumb from "@/views/components/Breadcrumb";
import { mapState } from "vuex";
import { getTime } from "@/utils/service.js";
export default {
  data() {
    return {
      title: {
        group: "商品管理",
        name: "推荐列表",
      },
      loading: false,
      tableData: [],
    };
  },
  created() {
    this.getStoreRecommendList();
  },
  methods: {
    async getStoreRecommendList() {
      let obj = {
        storeId: this.print.storeId,
      };
      const res = await this.axios.getStoreRecommendList(obj);
      this.tableData = res.data.data;
    },
    async oPStoreRecommend(id) {
      let obj = {
        goodsId: id,
        storeId: this.print.storeId,
        type: 1,
      };
      const res = await this.axios.oPStoreRecommend(obj);
      if(res.data.code == 200){
        this.$message({
          message:"删除成功",
          type:"success",
          duration:1500,
          onClose:()=>{
            this.getStoreRecommendList()
          }
        })
      } else {
        this.$message.warning(res.data.message)
      }
    },
    handleCurrentChange(val) {
      // 改变当前页码重新获取数据
      this.curPage = val;
      this.getGoodsList();
    },
    reDelete(id) {
      // 点击删除
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.oPStoreRecommend(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
  components: {
    LeftMenus,
    Breadcrumb,
  },
  computed: {
    ...mapState({
      print: (state) => state.print.all,
    }),
  },
};
</script>

<style lang="scss" scoped>
.recommend {
  display: flex;
  justify-content: center;
  .recommend-main {
    background-color: #fff;
    padding: 10px;
    .recommend-main_content {
      min-width: 800px;
      margin: 15px 0;
      border: 1px solid rgba(229, 230, 234, 1);
      border-top: 0;
      .contenttitle {
        box-sizing: border-box;
        padding: 10px;
        line-height: 28px;
        font-weight: bold;
        height: 50px;
        background-color: rgba(245, 245, 245, 1);
        border-top: 2px solid rgba(176, 184, 184, 1);
      }
      .recommend-main_contentFirst {
        padding: 10px;
        /deep/ .el-button + .el-button {
          margin-left: 0;
          margin-top: 5px;
        }
      }
    }
  }
  .paging {
    margin-top: 50px;
  }
  .ssl {
    width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
  .stocksTop {
    margin-top: 18px;
  }
  .btn-pa /deep/ .el-button {
    padding: 0;
  }
  .guige {
    display: flex;
    justify-content: flex-start;
    span {
      /deep/ .el-input {
        width: 70%;
      }
      margin-bottom: 15px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 15px;
      font-weight: 700;
    }
  }
  .coll-dialog1 {
    /deep/ .el-icon-close:before {
      content: "\e78d";
      font-size: 25px;
    }
    .coll-dialog1_way {
      padding: 0 3%;
      line-height: 30px;
      h3 {
        color: #00baad;
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
      }
      .coll-dialog1_main {
        padding: 2% 3%;
        width: 70%;
        display: flex;
        justify-content: space-between;
        span {
          color: rgb(173, 168, 168);
        }
      }
      .coll-dialog1_main1 {
        padding: 2% 3%;
        .coll-dialog1_input {
          display: flex;
          align-items: center;
          p {
            min-width: 81px;
            margin-left: -11px;
          }
          /deep/ .el-input__inner {
            height: 25px;
            line-height: 25px;
            width: 180px;
          }
        }
      }
    }
    .coll-dialog1_way + .coll-dialog1_way {
      margin-top: 65px;
    }
    .dialog-footer {
      padding-right: 10%;
    }
  }
}
</style>
